import React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import { SearchBar, Cell } from '@nutui/nutui-react-taro'
import { ArrowRight, CheckNormal } from '@nutui/icons-react-taro'
import './cattleInfo.scss'
import { livesTokTj, scListQuery } from '../../api/livestock'
import Taro from '@tarojs/taro'

export default function CattleInfo(props) {

    // changeId修改selectLivestock父组件的cattleId函数
    const { choose, fn, changeId } = props
    // 初始选中的表格
    const [select, setSelect] = useState(-1)
    // 牲畜列表信息
    const [cattleListInfo, setCattleListInfo] = useState([])
    // 查询牲畜列表
    const cattleList = async () => {
        const res = await scListQuery(
            {
                orgid: '',
                curPage: 1,
                pageSize: 20,
                keyword: '',
                stype: 0,
                sex: ''
            }
        )
        console.log(res.data);
        setCattleListInfo(res.data)
    }

    // 查询牲畜数量信息
    const cattleNum = async () => {
        const res = await livesTokTj({ orgid: '' })
        // console.log(res);
    }

    // 点击单元格
    const Fn = (index) => {
        const cattleInfo = {
            id: cattleListInfo[index].F_Id,
            name: cattleListInfo[index].F_Title,
            iMei: cattleListInfo[index].F_IMEI,
            status: 1
        }
        if (fn) {
            setSelect(index);
            // 调用父组件 SelectLivestock 的方法修改为选中牲畜的id
            changeId(cattleInfo)
            return;
        }
        Taro.navigateTo({
            url: '/pages/cattle/cattleDetail/CattleDetail',
            success: (res) => {
                // 通过eventChannel向被打开页面传送数据(所选中的牛只信息)
                res.eventChannel.emit('selectInfo', { id: cattleListInfo[index].F_Id })
            }
        })
    }

    useEffect(() => {
        cattleList()
        cattleNum()
    }, [])

    return (
        <>
            <SearchBar shape="round" className='search-bar' />
            <View className='cattle-list'>
                {/* 牲畜列表 */}
                {cattleListInfo.map((item, index) => (
                    <Cell
                        className='cell'
                        onClick={() => Fn(index)}
                        align='center'
                        title={
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <Image src='/assets/images/home.png' style={{ marginRight: '20rpx', width: '72rpx', height: '72rpx' }} />
                                <div>
                                    <p className='title'>{item.F_Title}</p>
                                    <p className='i-mei'>IMEI : {item.F_IMEI}</p>
                                </div>
                            </div>
                        }
                        extra={
                            choose ? <ArrowRight /> : (select === index ? <Image src='/assets/images/home.png' style={{ width: '42rpx', height: '42rpx' }} /> : <CheckNormal style={{ color: '#DEDEDE' }} />)
                        }
                    />
                ))}

            </View>
        </>
    )
}
